<template>
	<div
		class="cl-chat-message__item"
		:key="item.id || item.uid"
		:class="[item.reader_type == 1 ? `is-right` : `is-left`, `is-${item.mode}`]"
	>
		<!-- 日期 -->
		<div class="date" v-if="item._date">
			<span>{{ item._date }}</span>
		</div>

		<!-- 内容 -->
		<div class="main">
			<!-- 头像 -->
			<div class="avatar">
				<!-- <img :src="item.avatarUrl" /> -->
				<cl-avatar :src="item.avatar" shape="square" size="medium" />
			</div>

			<div class="det">
				<!-- 昵称 -->
				<span class="name">{{ item.nickName }}</span>

				<div
					class="content"
					v-loading="item.loading"
					:element-loading-text="item.progress"
					@click="$emit('content-click', item)"
				>
					<!-- 文本 -->
					<template v-if="item.mode === 'text'">
						{{ item.content }}
					</template>

					<!-- 图片 -->
					<template v-else-if="item.mode === 'image'">
						<img
							v-if="item.content.includes('data:image/png;base64')"
							:src="item.content"
						/>

						<el-image
							v-else
							:key="item.uid"
							:src="item.content"
							:preview-src-list="[item.content]"
							:z-index="3000"
						>
							<template #placeholder>
								<img :src="item.content" alt="" />
							</template>
						</el-image>
					</template>

					<!-- 表情 -->
					<template v-else-if="item.mode === 'emoji'">
						<img :src="item.content.imageUrl" />
					</template>

					<!-- 语音 -->
					<template v-else-if="item.mode === 'voice'">
						<icon-voice :play="item.isPlay" />
						<span class="duration"> {{ item.content.duration | duration }}" </span>
					</template>

					<!-- 视频 -->
					<template v-else-if="item.mode === 'video'">
						<div class="item">
							<video
								:poster="item.content.videoUrl | video_poster"
								:src="item.content.videoUrl"
								controls
							/>
						</div>
					</template>

					<!-- 未知 -->
					<template v-else>
						<span>待扩展消息类型</span>
						<i class="el-icon-warning-outline" />
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import IconVoice from "@/components/icon-voice";
export default {
	components: {
		IconVoice
	},
	props: {
		item: {
			type: Object,
			default: () => ({})
		}
	},
	filters: {
		duration(val) {
			return Math.ceil((val || 1) / 1000);
		}
	}
};
</script>
<style lang="scss" scoped>
.cl-chat-message__item {
	&.is-right {
		.main {
			flex-direction: row-reverse;

			.det {
				margin-right: 10px;
				align-items: flex-end;

				.content {
					border-top-right-radius: 0;
					background-color: $color-primary;
					color: #fff;
				}
			}
		}

		&.is-voice {
			.content {
				justify-content: flex-end;
			}
		}
	}

	&.is-text {
		.content {
			max-width: 100%;
			min-width: 40px;
			word-wrap: break-word;
		}
	}

	&.is-text,
	&.is-voice {
		.content {
			padding: 6px;
			line-height: 20px;
			letter-spacing: 1px;
		}
	}

	&.is-emoji {
		.content {
			padding: 6px;

			img {
				height: 20px;
				width: 20px;
			}
		}
	}

	&.is-voice {
		.content {
			display: flex;
			align-items: center;
			width: 65px;
			cursor: pointer;

			&:hover {
				opacity: 0.8;
			}
		}
	}

	&.is-video {
		.item {
			video {
				display: block;
				max-width: 300px;
				max-height: 300px;
				border-radius: 10px;
			}
		}
	}

	&.is-image {
		.main {
			.det {
				.content {
					background-color: #fff;
					.el-image,
					img {
						display: block;
						border-radius: 6px;
						max-width: 200px;
						min-width: 80px;
					}
				}
			}
		}
	}

	&.is-undefined {
		.main {
			.det {
				.content {
					display: flex;
					align-items: center;
					padding: 10px;
					letter-spacing: 1px;
					background-color: #f56c6c;
					color: #fff;

					.el-icon-warning-outline {
						font-size: 15px;
						margin-left: 4px;
					}
				}
			}
		}
	}
}
</style>
